/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-16 17:54:51
 * @LastEditTime: 2023-04-15 17:34:51
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Box, Center, Flex, Icon, Image, Text } from '@chakra-ui/react';
import { memo } from 'react';
import { MdCheckCircle, MdOutlineImageNotSupported } from 'react-icons/md';

import { changeUrl } from '../ParametersModal';
export interface PaintingStyle {
  id: string;
  name: string;
  imgUrl?: string;
  onClick: (e: string) => void;
  isSelected: boolean;
}

export const PaintingStyleItem = (props: PaintingStyle) => {
  const { name, imgUrl, id, isSelected, onClick } = props;

  return (
    <Box
      role="group"
      w="8rem"
      textAlign="center"
      cursor="pointer"
      onClick={() => onClick(id)}
    >
      <Box
        rounded="md"
        border="3px solid"
        borderColor={isSelected ? 'base.50' : 'base.850'}
        _light={{
          borderColor: isSelected ? 'accent.700' : 'base.850',
        }}
        position="relative"
      >
        <Center top={1} right={1} position="absolute">
          {isSelected && (
            <Icon
              borderRadius="full"
              color="base.50"
              _light={{
                color: 'accent.700',
              }}
              as={MdCheckCircle}
              fontSize="1.5rem"
            />
          )}
        </Center>
        {imgUrl ? (
          <Image
            height="8rem"
            w="100%"
            objectFit="cover"
            borderRadius="base"
            src={changeUrl(imgUrl)}
            loading="lazy"
          />
        ) : (
          <Flex height="8rem" justify="center" align="center">
            <MdOutlineImageNotSupported />
          </Flex>
        )}
      </Box>

      <Text
        textAlign="center"
        fontWeight={isSelected ? 600 : 400}
        color={isSelected ? 'accent.500' : 'base.300'}
      >
        {name}
      </Text>
    </Box>
  );
};
export default memo(PaintingStyleItem);
